<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <title>分离式下拉菜单</title>
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <style>
        .two{
            margin: 200px 500px;
        }
    </style>
</head>
<body>
<div class="container two">
    <div class="btn-group">
        <button class="btn btn-primary" onclick="show(this)">安徽省</button>
        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">合肥市</a></li>
            <li><a href="#">芜湖市</a></li>
            <li><a href="#">马鞍山市</a></li>
            <li class="divider"></li>
            <li><a href="#">六安市</a></li>
        </ul>
    </div>
    <div class="btn-group btn-group-lg dropup">
        <button class="btn btn-success" onclick="show(this)">合肥市</button>
        <button class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">庐阳区</a></li>
            <li><a href="#">蜀山区</a></li>
            <li><a href="#">瑶海区</a></li>
            <li class="divider"></li>
            <li><a href="#">政务区</a></li>
        </ul>
    </div>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/bootstrap.js"></script>
<script>
    function show(btn) {
        console.log(btn.innerHTML);
    }
</script>
</body>
</html>